<template>
    <div>
            <div class="add" @click="plus"> 新增</div>
            <!-- <div class="add" @click="test"> test</div> -->
                <el-form :model="item" v-for="(item,index) in both_form" :key="index" label-position="width" label-width="180px">
                <div v-if="index!=0" class="line"></div>
                <div v-for="(both_item,both_index) in mconfig.both_config[class_id]" :key="both_index+'both_index'">
                    <div class="input_class" v-if="both_item['type']=='select'">
                        <el-form-item :label="both_item.title +':'"  :prop="both_item['field']"
                                      :rules="both_item['rule']"
                                      v-if="both_item['type']=='select'">
                            <el-select v-model="both_form[index][both_item['field']]"
                                       @change="selectChange(index,both_item['field'])" :placeholder="both_item.title">
                                <el-option
                                        v-for="(items,indexs) in both_item.options"
                                        :label="items.title"
                                        :key="indexs"
                                        :value="items.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!--配置文件中的is_show属性用来看看select的值为多少时需要展示这个字段,
                    如果当前的选中的字段(both_item['show_field'])在is_show属性中则展示-->
                    <el-form-item style="margin-bottom:20px" :label="both_form[index][both_item['show_field']]==9?'合法执照:':both_item.title+':'" :prop="both_item['field']" v-if="both_item['type']=='file'&&
                               both_item['is_show'].indexOf(both_form[index][both_item['show_field']])>-1"
                                :rules="both_item['rule']?both_item['rule'][both_form[index][both_item['show_field']]]:[]"
                           >
                        <!--index为是both_form中的第几条数据的文件,field为这个字段的所有信息,用来保存默认数据-->
                        <upfile :callback="upfile" :file_config="{index:index,field:both_item}">
                            <img :src="mconfig.host+both_form[index][both_item['field']]"
                                 v-if="both_form[index][both_item['field']]">
                        </upfile>
                        <div class="exam-img">
                            <div class="img-inform">
                                <img src="../../assets/imgs/inform.png">
                                <span>示例:</span>
                            </div>
                            <examimg :imgType="both_item['field']=='busimg'?0:both_item['field']=='idcardimg'?2:1"></examimg>
                        </div>
                    </el-form-item>
                    <div class="input_class" v-if="both_item['type']=='input'">
                        <el-form-item :label="both_item.title+':'" :prop="both_item['field']"
                                      :rules="both_item['rule']">
                            <el-input v-model="both_form[index][both_item['field']]"
                                      :placeholder="both_item.title"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="btn-groun">
                    <el-button @click="dele(index)" v-if="both_form.length>0" > 删除当前</el-button>
                </div>
        </el-form>
    </div>
</template>
<script>
    import upfile from  "./upfile.vue"
    import examimg from "./imgExample"
    export default{
        props: {
            class_id: {
                default: 1
            },
            limit: {
                default: 1
            },
            callback: {
                //
                type: Function,
                default: function () {
                }
            },
            append:{
                //回显数据,后端响应的完整数据
                type: Array,
                default() {
                    return [];
                }
            }
        },
        watch: {
            both_form: {
                deep: true,
                handler: function (value, old) {
                    this.callback(this.both_form)
                }
            }
        },
        components: {upfile,examimg},
        data(){
            return {
                both_form: [],//表单
                one_data: {},//一条数据的数据格式
            }
        },
        methods: {
            plus(){
                this.both_form.push(JSON.parse(JSON.stringify(this.one_data)))
            },
            //切换的时候删除其他数据
            selectChange(index, field){
                let one = JSON.parse(JSON.stringify(this.one_data))
                for (let key in  this.both_form[index]) {
                    if (key != field) {
                        this.both_form[index][key] = ""
                    }
                }
//                this.both_form[index]=one
            },
            //获得图片后上传图片
            upfile(files, file_config){
                //将文件上传解析
                if (files.length > 0) {
                    let from_data = new FormData()
                    if (file_config.field.field == "busimg") {
                        //营业执照
                        from_data.append("picbussi", files[0])
                    } else if(file_config.field.field == "idcardimg") {
                        from_data.append("picidcard", files[0])
                    }else{
                        from_data.append("picdbcard", files[0])
                    }
                    from_data.append("picType", 1)
                    this.$http({
                        method: "post",
                        headers: {
                            "Content-Type": "multipart/form-data",
                        },
                        url: "/trademark/distinguish/picdis",
                        data: from_data,
                    }).then((res) => {
//                        let ress=JSON.parse(JSON.stringify(res))
                        if (file_config.field.field == "busimg") {
                            //营业执照
                            this.mconfig.both_config[this.class_id].map((item)=>{//循环一下这个表的所有配置
                                if(item.field==file_config.field.show_field){//判断当前循环字段是否是option的字段
                                    if(item.default_echo_field[this.both_form[file_config.index][item.field]]==file_config.field.field){
                                            //判断当前上传的字段是否是option的回显字段(default_echo_field)
                                        for (let one in file_config.field.key_value) {
                                            this.both_form[file_config.index][file_config.field.key_value[one]] = res.data.data.po[one]
                                        }
                                    }
                                }
                            })

                            //需要上传的地址
                            this.both_form[file_config.index][file_config.field.field] = res.data.data.popath
                            this.$set(this.both_form,file_config.index, this.both_form[file_config.index])
                        } else if(file_config.field.field == "idcardimg") {
                            //不是营业执照就是身份证
                            this.mconfig.both_config[this.class_id].map((item)=>{//循环一下这个表的所有配置
                                if(item.field==file_config.field.show_field){//判断当前循环字段是否是option的字段
                                    if(item.default_echo_field[this.both_form[file_config.index][item.field]]==file_config.field.field){
                                        //判断当前上传的字段是否是option的回显字段(default_echo_field)
                                        for (let one in file_config.field.key_value) {
                                            this.both_form[file_config.index][file_config.field.key_value[one]] = res.data.data.pic[one]
                                        }
                                    }
                                }
                            })
                            //需要上传的地址
                            this.both_form[file_config.index][file_config.field.field] = res.data.data.id_card
                            this.$set(  this.both_form,file_config.index, this.both_form[file_config.index])
                        }else{
//需                             要上传的地址
                            this.both_form[file_config.index][file_config.field.field] = res.data.data.picpath
                            this.$set(  this.both_form,file_config.index, this.both_form[file_config.index])
                        }
                    })
                } else {
                    //如果传递会的没有文件,说明是删除,应该做删除操作
                }
                console.log( this.both_form[file_config.index],456)
            },
            dele(index){
                this.both_form.splice(index,1)
            },
            test(){

            }
        },
        mounted(){
            // console.log(this.mconfig.both_config[this.class_id]);
            let one = {}
            this.mconfig.both_config[this.class_id].map(item => {
                one[item.field] = item.default ? item.default : ''
            })
            this.one_data = JSON.parse(JSON.stringify(one))
            if (this.append.length < 1) {
                // this.both_form.push(JSON.parse(JSON.stringify(one)))
                this.$set(this.both_form,0,JSON.parse(JSON.stringify(one)))
            }else{
                this.both_form=this.append
            }
        }
    }
</script>
<style lang="less" scoped>
    .add {
        border: solid 1px #cccccc;
        width: 57px;
        padding: 0px 3px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
    }

    .line {
        height: 1px;
        border: 1px #cccccc dashed;
        margin-top: 10px;
    }
    .input_class {
        margin: 20px 0;
    }
    .exam-img{
            position: absolute;
            margin-left: 11px;
            top: 0;
            left: 350px;
            display: flex;
            justify-content: space-between;
        }
        .img-inform{
            position: relative;
            img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                margin-left: -50px;
            }
            span{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                white-space: nowrap;
                margin-left: -20px;
                width: 38px;
                font-size: 12px;
                color: #f96900;
            }
        }
</style>